<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/animate.css" />
    <style>
      .my-anim {
        animation-duration: 5s;
        animation-delay: 2s;
        animation-iteration-count: infinite;
      }
    </style>
  </head>
  <body style="zoom: 300%">
    <button class="my-element">start</button>
    <!-- 
      https://www.html.cn/qa/css3/15691.html
      https://animate.style/#javascript
    -->
    <div style="display: flex;">
      <div class="animated hinge infinite delay-3s">演示文字</div>
      <div class="animated jackInTheBox infinite delay-3s">演示文字</div>
      <div class="animated rotateOutUpRight infinite delay-3s">演示文字</div>
      <div class="animated slideInLeft infinite delay-3s">演示文字</div>
      <div class="animated slideInDown infinite delay-3s">演示文字</div>
      <div class="animated slideInUp infinite delay-3s">演示文字</div>
      <div class="animated my-anim zoomOutUp">演示文字</div>
      <div class="animated my-anim zoomOutRight">演示文字</div>
      <div class="animated my-anim zoomOut">演示文字</div>
      <div class="animated my-anim rubberBand">演示文字</div>
      <div class="animated my-anim zoomInUp">演示文字</div>
      <div class="animated my-anim zoomInRight">演示文字</div>
      <div class="animated my-anim zoomInLeft">演示文字</div>
      <h1 class="h1" style="color: red; font-weight: 900px;">
        This is a test for animation
      </h1>
    </div>
    <script>
      const btn = document.querySelector(".my-element");
      const h1 = document.querySelector(".h1");
      btn.onclick = function () {
        h1.classList.add("animated", "bounceOutLeft");
      };
      h1.addEventListener("animationend", () => {
        console.log("end");
      });
    </script>
  </body>
</html>
